<template>
    <view>
        <!-- 自定义搜索模块组件 -->
        <my-search :bgcolor="'black'" :redius="10" @click="goToSearch"></my-search>
        <view class="scrol-view-container">
            <!-- 左侧滑动区域 -->
            <scroll-view class="left-scroll-view" scroll-y="true" :style="{ height: wh + 'px' }">
                <block v-for="(item, index) in cateList" :key="index">
                    <view :class="['left-scroll-view-item', index === active ? 'active' : '']" @click="activeChanged(index)">{{ item.cat_name }}</view>
                </block>
            </scroll-view>
            <!-- 右侧 -->
            <scroll-view class="right-scroll-view" scroll-y="true" :style="{ height: wh + 'px' }" :scroll-top="scrollTop">
                <view class="cate-lv2" v-for="(item2, index2) in cateLevel2" :key="index2">
                    <!-- 二级分类标题 -->
                    <view class="cate-lv2-title">{{ item2.cat_name }}</view>
                    <!-- 三级分类 -->
                    <view class="cate-lv3-list">
                        <view class="cate-lv3-item" v-for="(item3, index3) in item2.children" :key="index3" @click="goToGoodsList(item3)">
                            <image :src="item3.cat_icon" mode=""></image>
                            <text>{{ item3.cat_name }}</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            wh: 0, // 当前设备的windowHeight
            cateList: [], // 左侧栏列表
            active: 0, // 默认激活项
            cateLevel2: [], // 二级分类
            scrollTop: 0 // 滚动条的位置
        };
    },
    onLoad() {
        // 从设备信息 获取windowHeight
        const sysInfo = uni.getSystemInfoSync();
        this.wh = sysInfo.windowHeight - 50;
        // 获取左侧滑动栏列表
        this.getCateList();
    },
    methods: {
        // 获取分类列表数据
        async getCateList() {
            const { data: res } = await uni.$http.get('/api/public/v1/categories');
            if (res.meta.status !== 200) return uni.$showMsg();
            this.cateList = res.message;
            this.cateLevel2 = res.message[0].children;
        },
        // 给点击项添加active
        activeChanged(i) {
            this.active = i;
            // 重新为二级分类列表赋值
            this.cateLevel2 = this.cateList[i].children;
            this.scrollTop = this.scrollTop === 0 ? 0.1 : 0;
        },
        // 三级分类的点击跳转
        goToGoodsList(i) {
            // 跳转到页面
            uni.navigateTo({
                url: '/subpkg/goods_list/goods_list?cid=' + i.cat_id
            });
        },
        // 搜索组件的点击
        goToSearch() {
            uni.navigateTo({
                url: "/subpkg/search/search"
            });
        }
    }
};
</script>

<style lang="scss">
.scrol-view-container {
    display: flex;
    .left-scroll-view {
        width: 120px;
        .left-scroll-view-item {
            background-color: #efefef;
            line-height: 60px;
            text-align: center;
            font-size: 14px;
            &.active {
                background-color: #ffffff;
                position: relative;
                &::before {
                    content: '';
                    display: block;
                    width: 3px;
                    height: 30px;
                    background-color: #c00000;
                    position: absolute;
                    top: 50%;
                    left: 5px;
                    transform: translateY(-50%);
                }
            }
        }
    }
    .right-scroll-view {
        .cate-lv2 {
            .cate-lv2-title {
                font-size: 16px;
                font-weight: bold;
                text-align: center;
                padding: 10px 0;
                background-color: #eaeaea;
            }
            .cate-lv3-list {
                display: flex;
                flex-wrap: wrap;
                .cate-lv3-item {
                    width: 33.33%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    margin: 10px 0;
                    image {
                        width: 60px;
                        height: 60px;
                    }
                    text {
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
</style>
